<script setup>
import {useRoute, useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import {doDelete, doGet, doPost, doPut} from "../../util/request.js";
import {confirmMessage, showMessage} from "../../util/message.js";
//备注对象
const remark = ref({})
// 路由路由参数对象
const route = useRoute()
// 创建路由对象
const router = useRouter()
//活动对象
const ActivityDetailInfo = ref({})
// 加载数据
const loadData = ()=>{
// 获取路由参数
  let id = route.params.id
  // 发送请求
  doGet('/api/activity/detail/'+id,{}).then(resp => {
    if (resp.data.code === 200){
      ActivityDetailInfo.value = resp.data.data
    }else {
      showMessage("数据加载失败，请稍后重试"+resp.data.msg,"error")
    }
  })
}
//活动备注列表-------------------------------------------------------------------------------------------
const dataList = ref([])
const pageInfo = ref({})// 分页对象
const loadDataList = (current)=>{
  doGet('/api/activity/remark/page/'+route.params.id,{ current: current,}).then(resp => {
    if (resp.data.code === 200){
      pageInfo.value = resp.data.data.total
      dataList.value = resp.data.data.list
    }else {
      showMessage("数据加载失败，请稍后重试"+resp.data.msg,"error")
    }
  })
}
//验证规则
const rulesRe = {
  noteContent: [
    {required: true, message: '请输入活动备注', trigger: 'blur'},
    {min: 3, max: 255, message: '长度在 3 到 255 个字符', trigger: 'blur'}
  ]
}
//表单提交对象
const FromRefs = ref()
//提交表单
const Submit = (FromRef,id)=>{
  if(!FromRef) return
  if(id){
    //修改

    let params = {
      id: id,
      noteContent: remark.value.noteContent
    }
    console.log('提交表单',params)
    doPut('/api/activity/remark/modify',params).then(resp => {
      if (resp.data.code === 200){
        showMessage("修改成功","success")
        loadDataList(1)
      }else {
        showMessage("修改失败"+resp.data.msg,"error")
      }
    })

  }else {
    //新增
    FromRef.validate(valid => {
      if (valid) {
        let params = {
          activityId: route.params.id,
          noteContent: ActivityDetailInfo.value.noteContent
        }
        console.log('提交表单',params)
        doPost('/api/activity/remark/add',params).then(resp => {
          if (resp.data.code === 200){
            showMessage("添加成功","success")

            FromRefs.value.resetFields()
            loadDataList(1)
          }else {
            showMessage("新增失败"+resp.data.msg,"error")
          }
        })
      }
    })
  }

}
//删除备注
const toDel = (id) =>{
  confirmMessage("确定删除该备注吗？").then(()=>{
    doDelete('/api/activity/remark/'+id,{}).then(resp => {
      if (resp.data.code === 200){
        showMessage("删除成功","success")
        loadDataList(1)
      }else {
        showMessage("删除失败"+resp.data.msg,"error")
      }
    })
  })

}

const drawer = ref(false)
//修改备注
const toEdit = (id) =>{
    doGet('/api/activity/remark/info/'+id,{}).then(resp => {
      if (resp.data.code === 200){
        remark.value = resp.data.data
      }
    })
}
//查询备注详情
onMounted(()=>{
// 活动详情
  loadData()
  let activityId = route.params.id
  // 活动备注详情
  loadDataList(1)
})
</script>

<template>

  <el-button type="primary" @click="router.back()">返回</el-button>

  <h1 style="text-align: center; font-size: 20px">市场活动详情</h1>

  <el-form

      ref="FromRefs"
      :rules="rulesRe"
      style="max-width: 600px"
      :model="ActivityDetailInfo"
      status-icon
      label-width="auto"

  >
    <el-form-item label="活动标识：">
      {{ ActivityDetailInfo.id }}
    </el-form-item>
    <el-form-item label="活动名称：">
      {{ ActivityDetailInfo.name }}
    </el-form-item>
    <el-form-item label="负责人：">
      {{ ActivityDetailInfo.ownerName }}
    </el-form-item>
    <el-form-item label="活动预算：">
      {{ ActivityDetailInfo.cost }}
    </el-form-item>
    <el-form-item label="开始时间：">
      {{ ActivityDetailInfo.startTime }}
    </el-form-item>
    <el-form-item label="结束时间：">
      {{ ActivityDetailInfo.endTime }}
    </el-form-item>
    <el-form-item label="创建人：">
      {{ ActivityDetailInfo.createByName }}
    </el-form-item>
    <el-form-item label="编辑时间：">
      {{ ActivityDetailInfo.editTime }}
    </el-form-item>
    <el-form-item label="编辑时间：">
      {{ ActivityDetailInfo.editByName }}
    </el-form-item>
    <el-form-item label="活动描述：">
      {{ ActivityDetailInfo.description }}
    </el-form-item>
    <el-form-item label="添加备注：" prop="noteContent">
      <el-input  type="textarea"
                 v-model="ActivityDetailInfo.noteContent"
                maxlength="255" minlength="3" show-word-limit rows="1"/>
    </el-form-item>
  </el-form>
  <el-button type="primary" @click="Submit(FromRefs)">添加</el-button>
  <el-divider />
  <h1>备注列表</h1>

  <el-table
      :data="dataList"
      row-key="id"
      style="width: 100%"
      @selection-change="handleSelectionChange"
  >
<!--    <el-table-column type="selection" :selectable="selectable" width="55" />-->
    <el-table-column label="序号" type="index" width="80" />
    <el-table-column label="活动名称" width="120" property="activityName"/>
    <el-table-column label="负责人" property="ownerName"  width="120"/>
    <el-table-column label="创建时间" width="200" property="createTime"/>
    <el-table-column label="创建人" property="createByName"  width="120"/>
    <el-table-column label="编辑时间" width="200" property="editTime"/>
    <el-table-column label="编辑人" width="80" property="editByName"/>
    <el-table-column label="活动备注" width="150" property="noteContent" show-overflow-tooltip/>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="success" size="small" @click="toEdit(scope.row.id),drawer = true">编辑</el-button>
        <el-button size="small" type="danger" @click="toDel(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
<!--  分页-->
  <el-pagination style="margin-left: 550px" background layout="prev, pager, next" :total=pageInfo @change="loadData"/>
<!-- 抽屉 -->
  <el-drawer v-model="drawer" title="I am the title" :with-header="false">
    <el-form
        :data="remark"
        ref="FromRefs"
        :rules="rulesRe"
        style="max-width: 600px"
        :model="remark"
        status-icon
        label-width="auto"

    >
      <el-form-item label="修改：" prop="noteContent">
        <el-input  type="textarea"
                   v-model="remark.noteContent"
                   maxlength="255" minlength="3" show-word-limit rows="3"/>
      </el-form-item>

    </el-form>
    <el-button type="primary" @click="Submit(FromRefs,remark.id)">修改</el-button>
  </el-drawer>
</template>

<style scoped>



</style>